<template>
  <div id="container"></div>
</template>

<script>
import { Graph } from "@antv/x6";

export default {
  name: "relative",
  props:{
    data:Array,
  },
  data(){
    return {
      width:1000,
      height: 800,
      graph:'',
      tasks:[],
      colors:{
        wym:'#c3c8d3',//无烟煤
        jf:'#858ea2',//焦粉
        zq:'#8d8dee',//蒸汽
        yq:'#bebeef',//氧气
        dq:'#a2b3de',//氮气
        shsfwg:'#7e99e0',//石灰石粉外购
        shstsj:'#e1dda0',//石灰石脱S剂
        lmsf:'#bdbda7',//菱镁石粉
        tpf:'#00fd01',//碳排放
        ym:'#3284d5',//烟煤
        jt:'#1364b4',//焦炭
        dlwg:'#228a23',//电力外购
        bfg:'#fd0001',//bfg
        ldg:'#a82c2c',//ldg
        gmhj:'#c48383',//硅锰合金
        fg:'#a26e6e',//废钢
        gt:'#704d4d',//硅铁
        bys:'#9d5050',//白云石
      }
    }
  },
  methods:{
    change(){
      this.width = this.width-30
      this.height = this.height-30
      this.graph.centerContent()
    },
    initRects(graph){
      const sj = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 200,
        y: 200,
        label: '烧结',
      })
      const qt = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 200,
        y: 310,
        label: '球团',
      })
      const lt = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 40,
        x: 400,
        y: 250,
        label: '炼铁',
      })
      const bfg = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 500,
        y: 320,
        label: 'BFG',
      })
      const lg = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 600,
        y: 255,
        label: '炼钢',
      })
      const ldg = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 700,
        y: 320,
        label: 'LDG',
      })
      const zg = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 800,
        y: 255,
        label: '轧钢',
      })
      const dl = graph.addNode({
        shape: 'rect',
        width: 60,
        height: 30,
        x: 900,
        y: 180,
        label: '电力',
      })
      return {sj,qt,lt,bfg,lg,ldg,zg,dl}
    },
    initLine1(graph,start,end,text,strokeWidth=18){
      graph.addEdge({
        source: start,
        target: end,
        // 如果没有 args 参数，可以简写为 router: 'orth'
        connector: { name: 'smooth' },
        markup: [
          {
            tagName: 'path',
            selector: 'line',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          line: {
            fill:'none',
            stroke: '#7f7f80',
            strokeWidth,
            connection: true,
            targetMarker: '',
          },
          label: {
            textPath: { selector: 'line', startOffset: '50%' },
            textAnchor: 'middle',
            textVerticalAnchor: 'middle',
            text: text,
            fontSize:'12',
            fill: '#000000',
          },
        },
      });


    },
    initLine2({graph,start,anchor='bottom',end,offset,vertices,color,strokeWidth=3}){
      const edge = {
        source: start,
        target: end,
        router: "orth",
        connector: 'rounded',
        vertices:vertices,
        zIndex:1,
        markup: [
          {
            tagName: 'path',
            selector: 'line',
          },
        ],
        attrs: {
          line: {
            targetMarker: '',
            fill:'none',
            strokeWidth: strokeWidth,
            stroke: color,
            connection: true,
          },
        },
      }
      if(offset){
        edge.source = {
          cell: start,
          anchor:
            {
              name: anchor,
              args: {
                dx:offset.dx || 0,
                dy:offset.dy || 0,
              },
            },
        }
      }
      graph.addEdge(edge);
    },
    initText({ graph, x,y,text}){
      const zg = graph.addNode({
        shape: 'rect',
        x,y,
        markup: [
          {
            tagName: 'rect',
            selector: 'body',
          },
          {
            tagName: 'text',
            selector: 'label',
          },
        ],
        attrs: {
          body: {
            fill: 'none',
            strokeWidth:0,
          },
          label: {
            textAnchor: 'end',
            textVerticalAnchor: 'middle',
            text: text,
            fontSize:'12',
            fill: '#000000',
            zIndex:100,
          },
        },
      })
    },
    initLine3({ graph, start, end, text,color,strokeWidth = 1,offset = {}}){
      graph.addEdge({
        source: {
          cell: start,
          anchor:
            {
              name: 'left',
              args: {
                dx:offset.dx || 10,
                dy:offset.dy || 0,
              },
            },
        },
        target: end,
        connector: { name: 'smooth' },
        markup: [
          {
            tagName: 'path',
            selector: 'line',
          },
        ],
        attrs: {
          line: {
            fill:'none',
            stroke: color,
            strokeWidth: strokeWidth,
            connection: true,
            targetMarker: '',
          },
        },
      });
    },
    init(){
      const graph = new Graph({
        container: document.getElementById("container"),
        width: 1000,
        height: 500,
        interacting:{
          nodeMovable:false,
          edgeMovable:false
        },
        background: {
          color: "#f8f8f2",
        },
      });
      const colors = this.colors
      graph.translate(-70, 0); // 在 x、y 方向上平移画布
      graph.zoom(-0.2)
      const rects = this.initRects(graph)
      const nextTick = Promise.resolve()
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:180},color:colors.wym})
        this.initText({graph,x:100,y:170,text:`(1) 无烟煤：${val} kg`})
      })//1
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:220},color:colors.jf})
        this.initText({graph,x:100,y:210,text:`(2) 焦粉：${val} kg`})
      })//2
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:260},color:colors.zq})
        this.initText({graph,x:100,y:250,text:`(3) 蒸汽：${val} m3`})
      })//3
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:300},color:colors.dq})
        this.initText({graph,x:100,y:290,text:`(4) 氮气：${val} m3`})
      })//4
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:2.5,start:rects.sj,end:rects.dl,vertices:[{x:150,y:200},{x:150,y:70}],color:colors.dlwg})//x: 200,  y: 200,
        nextTick.then(()=> this.initText({graph,x:650,y:62,text:`(5) 电力外购：${val} kwh`}))
      })//5
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.sj,end:rects.bfg, strokeWidth:1,vertices:[{x:150,y:235},{x:150,y:410}],color:colors.bfg,anchor:'left',offset:{dy:10}})//x: 200, y: 310,
        nextTick.then(()=> this.initText({graph,x:300,y:400,text:`(6) BFG：${val} m3`}))
      })//6
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.sj,end:rects.ldg, strokeWidth:1,vertices:[{x:135,y:235},{x:135,y:430}],color:colors.ldg,anchor:'left',offset:{dy:5}})//x: 200, y: 310,
        nextTick.then(()=> this.initText({graph,x:260,y:420,text:`(7) LDG：${val} m3`}))
      })//7
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:140},color:colors.shsfwg})
        this.initText({graph,x:100,y:130,text:`(8) 石灰石粉外购：${val} kg`})
      })//8
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:100},color:colors.shstsj})
        this.initText({graph,x:100,y:90,text:`(9) 石灰石脱S剂：${val} kg`})
      })//9
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 40,y:60},color:colors.lmsf})
        this.initText({graph,x:100,y:50,text:`(10) 菱镁石粉：${val} kg`})
      })//10
      this.tasks.push(val=>{
        this.initLine1(graph,rects.sj,rects.lt,`(11) 烧结矿：${val} kg `,23)
      })//11
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.sj,end: { x: 200,y:-10},color:colors.tpf,offset:{dx:45},strokeWidth:8})
        this.initText({graph,x:200,y:-10,text:`(12) 烧结工序碳排放：${val} kg`})
      })//12
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.qt,end: { x: 40,y:340},color:colors.zq})
        this.initText({graph,x:100,y:330,text:`(13) 蒸汽：${val} m3`})
      })//13
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:1,start:rects.qt,end:rects.dl,vertices:[{x:130,y:310},{x:130,y:50}],color:colors.dlwg})//x: 200, y: 310,
        nextTick.then(()=> this.initText({graph,x:650,y:42,text:`(14) 电力外购：${val} kwh`}))
      })//14
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.qt,end:rects.bfg, strokeWidth:2,vertices:[{x:250,y:390}],color:colors.bfg,offset:{dx:20}})//x: 200, y: 310,
        nextTick.then(()=> this.initText({graph,x:370,y:380,text:`(15) BFG：${val} m3`}))
      })//15
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.qt,end: { x: 190,y:490},color:colors.zq,offset:{dx:18},strokeWidth:1})
        this.initText({graph,x:200,y:490,text:`(16) 蒸汽：${val} m3`})
      })//16
      this.tasks.push(val=>{
        this.initLine1(graph,rects.qt,rects.lt,`(17) 球团矿：${val} kg`,11)
      })//17
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.qt,end: { x: 230,y:510},color:colors.tpf,offset:{dx:25},strokeWidth:2})
        this.initText({graph,x:330,y:520,text:`(18) 球团工序碳排放：${val} kg`})
      })//18
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 350,y:510},color:colors.yq,offset:{dx:13},strokeWidth:2})
        this.initText({graph,x:450,y:510,text:`(19) 氧气：${val} m3`})
      })//19
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 430,y:450},color:colors.dq,offset:{dx:27},strokeWidth:2})
        this.initText({graph,x:530,y:450,text:`(20)氮气：${val} m3`})
      })//20
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 390,y:480},color:colors.zq,offset:{dx:20},strokeWidth:2})
        this.initText({graph,x:490,y:480,text:`(21) 蒸汽：${val} m3`})
      })//21
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:5,start:rects.lt,end:rects.bfg,anchor:'left',offset:{dy:18},vertices:[{x:370,y:305},{x:370,y:350}],color:colors.bfg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:500,y:360,text:`(22) BFG：${val} m3`}))
      })//22
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 280,y:-10},color:colors.wym,offset:{dx:13},strokeWidth:3})
        this.initText({graph,x:390,y:-10,text:`(23) 无烟煤：${val} kg`})
      })//23
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 320,y:10},color:colors.ym,offset:{dx:20},strokeWidth:2})
        this.initText({graph,x:430,y:10,text:`(24) 烟煤：${val} kg`})
      })//24
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 360,y:30},color:colors.jt,offset:{dx:27},strokeWidth:8})
        this.initText({graph,x:470,y:30,text:`(25) 焦炭：${val} kg`})
      })//25
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:4,start:rects.lt,end:rects.dl,offset:{dx:-28},vertices:[{x:350,y:225},{x:350,y:90}],color:colors.dlwg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:650,y:82,text:`(26) 电力外购：${val} kwh`}))
      })//26
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.lt,end:rects.bfg,anchor:'right',offset:{dy:10},vertices:[{x:510,y:280}],color:colors.bfg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:570,y:310,text:`(27) BFG：${val} m3`}))
      })//27
      this.tasks.push(val=>{
        this.initLine1(graph,rects.lt,rects.lg,`(28) 铁水：${val} kg`)
      })//28
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.lt,end:rects.dl,offset:{dy:-37},vertices:[{x:370,y:205},{x:370,y:110}],color:colors.dlwg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:650,y:102,text:`(29) 电力：${val} kwh`}))
      })//29
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lt,end: { x: 520,y:-10},color:colors.tpf,offset:{dx:45},strokeWidth:20})
        this.initText({graph,x:580,y:-10,text:`(30) 炼铁工序碳排放：${val} kg`})
      })//30
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 600,y:-10},color:colors.yq,offset:{dx:11},strokeWidth:1})
        this.initText({graph,x:710,y:-10,text:`(31) 氧气：${val} m3`})
      })//31
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 650,y:10},color:colors.dq,offset:{dx:18},strokeWidth:1})
        this.initText({graph,x:760,y:5,text:`(32) 氮气：${val} m3`})
      })//32
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 700,y:30},color:colors.zq,offset:{dx:25},strokeWidth:1})
        this.initText({graph,x:800,y:35,text:`(33) 蒸汽：${val} m3`})
      })//33
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:1.5,start:rects.lg,end:rects.dl,anchor:'left',offset:{dy:-10},vertices:[{x:570,y:235},{x:570,y:130}],color:colors.dlwg})//  x: 600, y: 255,
        nextTick.then(()=> this.initText({graph,x:740,y:122,text:`(34) 电力外购：${val} kwh`}))
      })//34
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.lg,strokeWidth:1,end:rects.ldg,anchor:'left',offset:{dy:10},vertices:[{x:570,y:305},{x:570,y:350}],color:colors.ldg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:700,y:360,text:`(35) LDG：${val} m3`}))
      })//35
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x:750,y:20},color:colors.zq,offset:{dx:32},strokeWidth:1})
        this.initText({graph,x:860,y:20,text:`(36) 蒸汽：${val} m3`})
      })//36
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.lg,end:rects.ldg,anchor:'right',offset:{dy:10},vertices:[{x:710,y:280},{x:710,y:280}],color:colors.ldg})// x: 400,y: 250,
        nextTick.then(()=> this.initText({graph,x:770,y:310,text:`(37) LDG：${val} m3`}))
      })//37
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 550,y:510},color:colors.bys,offset:{dx:11},strokeWidth:1})
        this.initText({graph,x:660,y:510,text:`(38) 白云石：${val} kg`})
      })//38
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 580,y:490},color:colors.gt,offset:{dx:15},strokeWidth:1})
        this.initText({graph,x:680,y:490,text:`(39) 硅铁：${val} kg`})
      })//39
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 610,y:470},color:colors.fg,offset:{dx:19},strokeWidth:1})
        this.initText({graph,x:710,y:470,text:`(40) 废钢：${val} kg`})
      })//40
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 640,y:450},color:colors.gmhj,offset:{dx:23},strokeWidth:1})
        this.initText({graph,x:760,y:450,text:`(41) 硅锰合金：${val} kg`})
      })//41
      this.tasks.push(val=>{
        this.initLine1(graph,rects.lg,rects.zg,`(42) 钢水：${val} kg`)
      })//42
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.lg,end: { x: 670,y:430},color:colors.tpf,offset:{dx:27},strokeWidth:1})
        this.initText({graph,x:830,y:430,text:`(43) 炼钢工序碳排放：${val} k8`})
      })//43
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:2.5,start:rects.zg,end:rects.dl,anchor:'left',offset:{dy:-10},vertices:[{x:770,y:240},{x:770,y:150}],color:colors.dlwg})// x: 800, y: 255,
        nextTick.then(()=> this.initText({graph,x:890,y:142,text:`(44) 电力：${val} kwh`}))
      })//44
      this.tasks.push(val=>{
        this.initLine2({graph,start:rects.bfg,end:rects.zg,offset:{dx:10},vertices:[{x:570,y:400},{x:570,y:400}],color:colors.bfg})// x: 500,  y: 320,
        nextTick.then(()=> this.initText({graph,x:700,y:390,text:`(45) BFG：${val} m3`}))
      })//45
      this.tasks.push(val=>{
        this.initLine1(graph,rects.zg, {x:980,  y:270},`(46) 钢材：${val} kg`)
      })//46
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.zg,end: { x: 850,y:510},color:colors.zq,offset:{dx:40},strokeWidth:1})
        this.initText({graph,x:950,y:510,text:`(47) 蒸汽：${val} m3`})
      })//47
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.zg,end: { x: 890,y:490},color:colors.dq,offset:{dx:45},strokeWidth:1})
        this.initText({graph,x:1000,y:490,text:`(48) 氮气：${val} m3`})
      })//48
      this.tasks.push(val=>{
        this.initLine3({graph,start:rects.zg,end: { x: 930,y:470},color:colors.tpf,offset:{dx:50},strokeWidth:5})
        this.initText({graph,x:1100,y:470,text:`(49) 轧钢工序碳排放：${val} kg`})
      })//49
      this.tasks.push(val=>{
        this.initLine2({graph,strokeWidth:12,start:rects.dl,end:{x:1100,y:234},vertices:[{x:1000,y:234}],color:colors.dlwg})
        this.initText({graph,x:1100,y:224,text:`(50) 外购电力：${val} kwh`})
      })//50
      for(let i=0;i<this.tasks.length;i++){
        if(this.data[i]){
          this.tasks[i](this.data[i])
        }
      }
    }
  },
  mounted() {
    this.init()
  }
};
</script>

<style scoped>

</style>
